<!--
 * @Author: your name
 * @Date: 2022-01-15 14:47:38
 * @LastEditTime: 2022-01-18 17:29:06
 * @LastEditors: Please set LastEditors
 * @Description: 商品详情页面
 * @FilePath: \uniapp\src\pages\goods_detail\index.vue
-->
<template>
  <view class="goods-detail">
    <!-- 1 轮播图 -->
    <u-swiper
      @click="handlePreviewImage"
      bg-color="#fff"
      :list="goods.pics"
      name="pics_big"
      height="497"
      img-mode="aspectFit"
    ></u-swiper>
    <!-- 2.商品价格及名称 -->
    <view class="goods-content">
      <!-- 价格、分享、收藏、文字详情 -->
      <view class="goods-other">
        <view class="goods-price">
          <span class="money">￥</span>
          <span class="price">{{ goods.goods_price }}</span>
        </view>
        <view class="goods-share">
          <u-icon
            class="zhuanfa"
            name="zhuanfa"
            color="#707070"
            size="46"
          ></u-icon>
          <u-icon name="heart" color="#707070" size="46"></u-icon>
        </view>
      </view>
      <!-- 商品说明 -->
      <view class="goods-explain">{{ goods.goods_name }}</view>
    </view>
    <!-- 3.图文详情 -->
    <view class="introduce">
      <view class="introduce-title u-p-15 u-text-center">图文详情 </view>
      <view class="u-content">
        <!-- 方式一 -->
        <!-- <view v-html="goods.goods_introduce"></view> -->
        <!-- 方式二 -->
        <!-- <rich-text :nodes="goods.goods_introduce"></rich-text> -->
        <!-- 方式三 -->
        <u-parse :html="goods.goods_introduce"></u-parse>
      </view>
    </view>
    <!-- 4.提交订单栏 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <navigator
          open-type="switchTab"
          url="/pages/cart/index"
          class="item car"
        >
          <u-badge
            class="car-num"
            :count="count"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view @click="handleCartAdd" class="cart btn u-line-1">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      // 商品信息
      goods: null,
    };
  },
  onLoad({ goods_id }) {
    goods_id = goods_id || 47868;
    // 获取商品详情
    this.getGoodsDetail(goods_id);
  },
  computed: {
    ...mapState({
      // 总的数量
      count: (state) =>
        state.cart.cartList.reduce((count, item) => (count += item.nums), 0),
    }),
  },
  methods: {
    // 获取vuex mutatations
    ...mapMutations(["cart/cartAdd"]),
    // 获取商品详情
    async getGoodsDetail(goods_id) {
      this.goods = await this.$u.get("/goods/detail", { goods_id });
    },
    // 点击轮播图
    handlePreviewImage(index) {
      // 获取 要放大预览的 图片数组 ["路径1","路径2"]
      const urls = this.goods.pics.map((pic) => pic.pics_big);

      // 当前点击的图片的路径
      const current = urls[index];
      // 调用api 放大预览
      uni.previewImage({ urls, current });
    },
    // 点击加入购物车
    handleCartAdd() {
      // console.log(this.cart/cartAdd);
      // console.log(this."cart/cartAdd");
      this["cart/cartAdd"]({ value: this.goods });
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-content {
  border-bottom: 19rpx solid #f9f9f9;
  .goods-other {
    display: flex;
    justify-content: space-between;
    .goods-price {
      margin: 19rpx 33rpx;
      .money {
        color: $themeColor;
        font-weight: 600;
        font-size: 25rpx;
      }
      .price {
        color: $themeColor;
        font-weight: 500;
        font-size: 36rpx;
      }
    }
    .goods-share {
      font-weight: 0;
      margin: 37.4rpx 37.9rpx 0 0;
      .zhuanfa {
        margin-right: 45.7rpx;
      }
    }
  }
  .goods-explain {
    width: 681rpx;
    height: 84rpx;
    margin: 19rpx 36rpx 0 36rpx;
    font-size: 30rpx;
    font-family: PingFangSC-Medium;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
.u-content {
  margin-bottom: 52rpx;
}
.introduce {
  margin-bottom: 100rpx;
}
.navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  .left {
    display: flex;
    font-size: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 30rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>